<template>
  <div class="body" id="map">
    <search @checkMusic="init" @close="openserch=false" class="search-page"
            :style="'transform: translateY('+(openserch?0:100)+'%)'"></search>
    <div class="bg_player_mask"></div>
    <div class="bg" :style="'background-image:url('+img+');transition: background 0.3s linear 0s;'"></div>
    <!--    <img src="../assets/timg.jpg" class="bg-image">-->
    <div class="top-menu">
      <div style="z-index: 10000;display: flex;flex: 1;align-items: center">
        <img class="logo" title="科讯音乐" src="./assets/kexunmusic.png">
        <div class="search" @click="openserch=true">
          <span class="iconfont icon-31sousuo"></span>
          <span>搜索音乐/歌手/关键字</span>
        </div>
      </div>
      <span class="iconfont " :class="{'icon-quanping':!fullscreen,'icon-quxiaoquanping':fullscreen}"
            @click="fullScreen"></span>
    </div>
    <div class="content">
      <div class="play-cnt">
        <div class="music-list">
          <div class="list-item list-item-title ">
            <div class="tt tt-6">歌曲</div>
            <div class="tt tt-2">歌手</div>
            <div class="tt tt-2 tt-ac">操作</div>
          </div>
          <div class="list-content">
            <div class="list-item " @click="checkMusic(index)" :class="{'list-active':index===playIndex}"
                 v-for="(item,index) in playList">
              <div class="tt tt-6">
                {{ item.music }}
                <img src="./assets/wave.gif" class="player-icon" v-if="index===playIndex">
              </div>
              <div class="tt tt-2">{{ item.singer }}</div>
              <div class="tt tt-2 tt-ac" title="移除">
                <span class="iconfont icon-changyonggoupiaorenshanchu" @click.stop="removeMusic(index)"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="pay-info">
          <!--          <h4>晴天</h4>-->
          <img class="play-img" :src="img"/>
          <div class="lrc-wap" ref="lrcWap">
            <div ref="lrcContent"
                 class="lrc-content"
                 :style="'transform: translateY('+translate+'px);'">
              <template v-if="lrcList.length>0">
                <div class="lrc-line" :class="{'lrc-active':item.active}" v-for="item in lrcList">
                  {{ item.text }}
                </div>
              </template>
              <div class="lrc-line lrc-active" v-else>暂无歌词</div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="play-menu">
      <div class="play-action">
        <span class="iconfont icon-shangyishou" @click="last"></span>
        <span class="iconfont " @click="play" :class="{'icon-zanting':!paused,'icon-bofang':paused}"></span>
        <span class="iconfont icon-xiayishou" @click="next"></span>
      </div>
      <div class="play-jdt">
        <div class="title-info">
          <div class="music-title">{{ music }} - {{ singer }}</div>
          <div class="play-time">{{ currentTime }}/{{ totalTime }}</div>
        </div>


        <div class="jdt-wap" ref="jdtref" @click="checkJdt" :title="hoverTitle" @mouseover="mouseover">
          <div class="jdt-in" :style="'width: '+jd+'%'">
            <div class="jdt-yun"></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import search from "@/components/search";

var audio = new Audio()
export default {
  name: "App",
  data() {
    return {
      fullscreen: false,
      playList: [],
      playIndex: 0,
      lrcList: [],
      translate: 0,
      jd: 0,
      currentTime: "00:00",
      totalTime: "00:00",
      hoverTitle: '',
      music: '',
      singer: '',
      img: 'http://file.kexunsoftware.com/img/d0ad9c05-9f85-4c3f-87fe-68205e6c7a8d.png',
      paused: false,
      openserch: false,
      isDown: false,
      cy: 0,
      oldDiff: 0
    }
  },
  mounted: function () {
    var that = this;
    that.init();
    navigator.mediaSession.setActionHandler('previoustrack', function () {
      that.last();
    });
    navigator.mediaSession.setActionHandler('nexttrack', function () {
      that.next();
    });
    navigator.mediaSession.setActionHandler('pause', function () {
      that.play();
    });
    navigator.mediaSession.setActionHandler('play', function () {
      that.play();
    });
  },
  components: {
    search
  },
  methods: {
    init: function () {
      this.playIndex = 0;
      var playList = window.localStorage.getItem("playList");
      if (!playList) {
        playList = [];
      } else {
        playList = JSON.parse(playList);
      }
      this.playList = playList;
      this.initPlayer();

    },
    play: function () {
      if (this.paused) {
        audio.play()
        this.paused = false;
      } else {
        audio.pause()
        this.paused = true;
      }
    },
    next: function () {
      if (this.playIndex < this.playList.length - 1) {
        this.playIndex++;
      } else {
        this.playIndex = 0;
      }
      this.initPlayer();
    },
    last: function () {
      if (this.playIndex > 0) {
        this.playIndex--;
      } else {
        this.playIndex = this.playList.length - 1;
      }
      this.initPlayer();
    },
    removeMusic: function (index) {
      if (index < this.playIndex) {
        this.playIndex--;
      } else if (index === this.playIndex) {
        audio.pause();
        if (index === this.playList.length - 1) {
          this.playIndex = 0;
          this.initPlayer();
        } else {
          this.next();
          this.playIndex--
        }
      }
      this.playList.splice(index, 1);
      window.localStorage.setItem("playList", JSON.stringify(this.playList));

      if (this.playList.length <= 0) {
        //初始化页面显示
        this.music = "科讯音乐";
        this.singer = "沉浸式听歌体验";
        this.img = 'http://file.kexunsoftware.com/img/d0ad9c05-9f85-4c3f-87fe-68205e6c7a8d.png';
        this.lrcList = [{
          text: "科讯音乐",
          active: true
        }, {
          text: "沉浸式听歌体验",
          active: false
        }];
        var ch = this.$refs.lrcWap.clientHeight;
        var wy = parseInt(ch / 2 / 32)
        this.translate = wy * 32;
        //初始化播放器
        audio.src = "";
        audio.pause();
      }
    },
    checkMusic: function (index) {
      this.playIndex = index;
      this.initPlayer();
    },
    initPlayer: function () {
      var playInfo = this.playList[this.playIndex];

      //初始化页面显示
      this.music = playInfo.music;
      this.singer = playInfo.singer;
      this.img = playInfo.img;
      document.title = playInfo.music;
      //初始化播放器
      audio.src = playInfo.src;
      var that = this;
      //获取歌词数组
      if (playInfo.lrc) {
        var lrcArr = playInfo.lrc.replace(/\n/g, '').split('[');
        //获取歌词格式化列表
        this.lrcList = this.getLrcList(lrcArr);
      } else {
        this.lrcList = [{
          text: "科讯音乐",
          active: true
        }, {
          text: "沉浸式听歌体验",
          active: false
        }];
        var ch = this.$refs.lrcWap.clientHeight;
        var wy = parseInt(ch / 2 / 32)
        this.translate = wy * 32;
      }

      //同步歌词 计算播放进度
      audio.ontimeupdate = function () {
        that.syncLrc();
      }
      audio.onended = function () {
        that.next();
      }
      audio.onerror = function () {
        that.$message.error("歌曲加载失败")
      }
      this.paused = false;
      //开始播放
      audio.play();
    },
    syncLrc: function () {
      var ch = this.$refs.lrcWap.clientHeight;
      var wy = parseInt(ch / 2 / 32)
      //当前播放时间/总时间*100 获取播放进度
      this.jd = (audio.currentTime / audio.duration) * 100
      //格式化时间为 mm:ss 格式
      var currentTime = this.getTime(audio.currentTime);
      //当前播放时间
      this.currentTime = currentTime;
      //总时长
      this.totalTime = this.getTime(audio.duration);
      //歌词列表
      var lrcList = this.lrcList;
      for (var i = 0; i < lrcList.length; i++) {
        var lrc = lrcList[i];
        //如果时间相同
        if (currentTime === lrc.time) {
          //将颜色改成非选择状态
          for (var j = 0; j < lrcList.length; j++) {
            lrcList[j].active = false;
          }
          document.title = lrcList[i].text;
          //选择
          lrcList[i].active = true;
          //将歌词向上移动
          this.translate = (i - wy) * 32 * -1;

          break;
        }

      }
    },
    getLrcList: function (arr) {
      var lrcList = [];
      for (var i = 0; i < arr.length; i++) {
        //[00:01.00]歌曲名 好久不见(Album Version)
        var item = arr[i];
        var time = item.substring(0, item.indexOf('.'))
        var text = item.substring(item.indexOf(']') + 1)

        if (text && text.length > 0) {
          var lrc = {
            time: time,
            text: text,
            active: false,
          }
          lrcList.push(lrc)
        }
      }
      return lrcList;
    },
    resolverLrc: function () {

    },
    mouseover: function (e) {
      var baseJdt = this.$refs.jdtref;
      var w = e.clientX - baseJdt.offsetLeft;
      var cw = baseJdt.clientWidth;
      var bfb = w / cw;
      var time = this.getTime(audio.duration * bfb);

      for (var i = 0; i < this.lrcList.length; i++) {
        var lrc = this.lrcList[i];
        if (time == lrc.time) {
          this.hoverTitle = lrc.text;
          break;
        }

      }
    },
    checkJdt: function (e) {
      var baseJdt = this.$refs.jdtref;
      console.log(baseJdt)
      var w = e.clientX - baseJdt.offsetLeft;
      var cw = baseJdt.clientWidth;
      var bfb = w / cw;
      this.jd = bfb * 100;
      audio.currentTime = audio.duration * bfb;
    },
    getTime: function (s) {
      var ss = 0;
      var mm = 0;
      if (s >= 60) {
        if (s % 60 == 0) {
          ss = 0;
          mm = s / 60;
        } else {
          mm = parseInt(s / 60);
          ss = parseInt(s - mm * 60);
        }
      } else {
        ss = parseInt(s);
        mm = 0;
      }

      if (mm < 10) {
        mm = "0" + mm;
      }
      if (ss < 10) {
        ss = "0" + ss;
      }
      if (s == NaN) {
        ss = "00";
      }

      return mm + ":" + ss;

    },
    fullScreen: function () {
      let fullarea = document.getElementById('map')
      if (this.fullscreen) {    // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {    // 进入全屏
        if (fullarea.requestFullscreen) {
          fullarea.requestFullscreen();
        } else if (fullarea.webkitRequestFullScreen) {
          fullarea.webkitRequestFullScreen();
        } else if (fullarea.mozRequestFullScreen) {
          fullarea.mozRequestFullScreen();
        } else if (fullarea.msRequestFullscreen) {
          // IE11
          fullarea.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    toIndex: function () {
      // audio.pause();
      // audio.src='';
      this.$router.replace("/index")
    }
  }
}
</script>

<style scoped>
@import url("./iconfont.css");

.body {
  margin: 0;
  font-family: "microsoft yahei";
  min-width: 350px;
}


.action-btn {
  font-size: 14px;
  color: #FFFFFF;
  height: 40px;
  line-height: 40px;
  width: max-content;
  padding: 0 20px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.jdt-yun {
  height: 8px;
  width: 8px;
  background-color: #FFFFFF;
  position: relative;
  top: -3px;
  right: -1px;
  float: right;
  border-radius: 8px;
  border: 2px solid #3BCF8D;
  cursor: pointer;
}

.jdt-in {
  height: 100%;
  background-color: #3BCF8D;
  border-radius: 4px;
  transition: width 0.3s linear 0s;

}

.music-title {
  color: #FFFFFF;
  font-size: 14px;

}

.play-love {
  width: 60px;
  text-align: center;
  font-size: 36px;
  color: #FFFFFF;
}

.jdt-wap {
  background-color: rgba(255, 255, 255, .3);
  height: 4px;
  margin-top: 8px;
  border-radius: 4px;
  cursor: pointer;
}

.title-info {
  display: flex;
  justify-content: space-between;
  padding-right: 5px;
  color: #FFFFFF;
  font-size: 16px;
}


.play-jdt {
  flex: 15;
  padding-left: 20px;
}

.play-action {
  flex: 3;
  display: flex;
  justify-content: space-between;

}

.play-action .iconfont {
  font-size: 32px;
  color: #FFFFFF;
  cursor: pointer;
}

.lrc-active {
  color: #3BCF8D;
}

.lrc-content {
  transition: transform 0.3s ease-out 0s;
  min-height: 128px;
  cursor: pointer;
  user-select: none;
}

.lrc-line {
  height: 32px;
  width: 100%;
  overflow: hidden;
}

.lrc-wap {
  margin-top: 10px;
  font-size: 18px;
  line-height: 32px;
  /*max-height: 300px;*/
  overflow: hidden;
  flex: 1;
  -webkit-mask-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .6) 15%, #fff 25%, #fff 75%, hsla(0, 0%, 100%, .6) 85%, hsla(0, 0%, 100%, 0));
}

.play-img {
  width: 168px;
  height: 168px;
  display: block;
  margin: 0 auto;
}

.list-active {
  color: #3BCF8D !important;

}

.bg_player_mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, .6);
}

.bg {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /*background-image: url("https://y.qq.com/music/photo_new/T002R300x300M000001uaPM93kxk1R.jpg?max_age=2592000");*/
  filter: blur(65px);
  transform: scale(2, 2);

  /*opacity: 0.8;*/
}

.list-item .tt {
  overflow: hidden;
  height: 50px;
  line-height: 50px;
}

.tt-6 {
  flex: 6;
}

.tt-2 {
  flex: 2;
}

.tt-ac:hover {
  color: #3BCF8D !important;
  transition: color 0.3s linear 0s;
}

.tt-ac {
  text-align: center;
  color: #FFFFFF !important;
}

div {
  /*border: 1px #999999 solid;*/
}

.player-icon {

}

.list-item:hover {
  background-color: rgba(255, 255, 255, .1);
  transition: background-color 0.3s linear 0s;
}

.list-item-title {
  /*background-color: rgba(255, 255, 255, .1);*/
}

.list-item {
  display: flex;
  height: 50px;
  line-height: 50px;
  color: #FFFFFF;
  font-size: 18px;
  padding: 0 5px;
  border-radius: 6px;
  cursor: pointer;
}

.search .iconfont {
  font-size: 14px !important;
  color: rgb(255, 255, 255, 0.3) !important;
  margin-right: 3px;
}

.search {
  width: 30%;
  background-color: rgb(255, 255, 255, 0.1);
  height: 33px;
  border-radius: 33px;
  margin-left: 20px;
  z-index: 10000;
  color: rgb(255, 255, 255, 0.3);
  line-height: 33px;
  padding: 0 15px;
  font-size: 14px;
  cursor: pointer;
}

.logo {
  width: 115px;
  height: 33px;
  display: block;
  z-index: 100;
}

.pay-info {
  flex: 4;
  text-align: center;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
}

.music-list {
  flex: 8;
  height: 100%;
  display: flex;
  flex-direction: column;

}

.list-content {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
}

.list-content::-webkit-scrollbar {
  　　display: none;
}

.play-cnt {
  flex: 1;
  display: flex;
  height: 100%;
}

.play-menu {
  height: 80px;
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 7%;
  z-index: 111;
}

.content {
  padding: 0 7%;
  flex-direction: column;
  z-index: 100;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 80px;
  overflow: hidden;
}

.search-page {
  z-index: 1000000;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /*overflow: auto;*/
  opacity: 0.9;
  transition: transform 0.3s ease 0s;

}

.body {
  padding: 20px;
  flex-direction: column;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.top-menu {
  height: 50px;
  z-index: 1100;
  /*position: absolute;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-menu .iconfont {
  font-size: 36px;
  color: #FFFFFF;
  z-index: 1100;
  opacity: 0.8;
  cursor: pointer;
}
</style>